<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏数据监控系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 3px solid #1E9FFF;
            padding-bottom: 15px;
        }

        .info-section {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .info-section h3 {
            color: #1E9FFF;
            margin-top: 0;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .feature-list li:before {
            content: "✓";
            color: #5FB878;
            font-weight: bold;
            margin-right: 10px;
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status-success {
            background-color: #5FB878;
        }

        .status-error {
            background-color: #FF5722;
        }

        .code-block {
            background: #f4f4f4;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
            margin: 10px 0;
        }

        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }

        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>游戏数据监控系统</h1>

        <div class="info-section">
            <h3>系统状态</h3>
            <p>
                <span class="status-indicator status-success"></span>
                前端监控系统已加载
            </p>
            <p id="backend-status">
                <span class="status-indicator status-error"></span>
                后端服务状态：检查中...
            </p>


            <button id="sendButton">发送 "testsend" 消息</button>
            <div id="output"></div>
        </div>

        <div class="info-section">
            <h3>系统功能</h3>
            <ul class="feature-list">
                <li>实时数据监控和预警</li>
                <li>可配置的监听间隔时间</li>
                <li>双邮箱预警通知系统</li>
                <li>WebSocket实时通信</li>
                <li>详细的操作日志记录</li>
                <li>自动邮件发送功能</li>
            </ul>
        </div>

        <div class="info-section">
            <h3>使用说明</h3>
            <p>1. 点击右上角的"监控配置"按钮打开配置面板</p>
            <p>2. 在配置面板中设置监听间隔、邮箱地址和预警值</p>
            <p>3. 点击"保存配置"按钮保存设置</p>
            <p>4. 系统将自动开始监控，并在日志区域显示运行状态</p>
            <p>5. 当检测到异常数据时，系统会自动发送邮件通知</p>
        </div>

        <div class="warning">
            <strong>注意：</strong>请确保后端服务已启动，否则监控功能将无法正常工作。
        </div>

        <div class="info-section">
            <h3>后端服务启动</h3>
            <p>在项目目录下运行以下命令启动后端服务：</p>
            <div class="code-block">
                # 安装依赖<br>
                npm install<br><br>
                # 启动服务<br>
                npm start<br><br>
                # 或者使用开发模式（自动重启）<br>
                npm run dev
            </div>
        </div>

        <div class="success">
            <strong>提示：</strong>系统已自动加载监控脚本，配置按钮应该已经出现在页面右上角。
        </div>
    </div>

    <!-- 加载监控系统 -->
    <!-- <script src="monitor-frontend.js"></script> -->

    <script>
        const output = document.getElementById('output');
        function appendMessage(message) {
            const div = document.createElement('div');
            div.textContent = message;
            output.appendChild(div);
            output.scrollTop = output.scrollHeight;
        }
        // 检查后端服务状态
        function checkBackendStatus() {
            const ws = new WebSocket('ws://localhost:3001');
            const statusElement = document.getElementById('backend-status');

            ws.onopen = function () {
                statusElement.innerHTML = `
                    <span class="status-indicator status-success"></span>
                    后端服务状态：已连接
                `;


                const sendButton = document.getElementById('sendButton');
                sendButton.addEventListener('click', () => {
                    if (ws.readyState === WebSocket.OPEN) {
                        ws.send(JSON.stringify({ type: 'testsend' }));
                        appendMessage('已发送: testsend');
                        ws.close();
                    } else {
                        appendMessage('WebSocket 连接未建立');
                    }
                });
            };

            ws.onerror = function () {
                statusElement.innerHTML = `
                    <span class="status-indicator status-error"></span>
                    后端服务状态：未启动
                `;
            };
        }

        // 页面加载完成后检查状态
        setTimeout(checkBackendStatus, 1000);



    </script>


<script src="./content.js"></script>
</body>

</html>